<template>
  <div v-loading="loading">
    <!-- 搜索部分 -->
    <el-card shadow="always" class="ml10 mb10 mt10 ml10">
      <el-row :gutter="24">
        <el-col :span="4">
          <el-form-item label="品类名称">
            <el-input
              v-model="searchData.skuName"
              placeholder="品类名称"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="品类类型">
            <el-select v-model="searchData.skuType" placeholder="请选择">
              <el-option label="烧烤类" value="1" />
              <el-option label="酒水类" value="2" />
              <el-option label="冷厨类" value="3" />
              <el-option label="热厨类" value="4" />
              <el-option label="餐具" value="5" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="品类价钱">
            <el-input
              v-model="searchData.price"
              placeholder="品类价钱"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="时间">
            <el-date-picker
              v-model="searchData.create_time"
              format="YYYY-MM-DD"
              type="date"
              placeholder="选择日期"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="search">查询</el-button>
          <el-button type="primary" @click="reset">重置</el-button>
        </el-col>
      </el-row>
    </el-card>
    <!-- 新增按钮 -->
    <el-button type="primary" @click="handleAdd" class="ml10"
      >新增品类</el-button
    >
    <!-- 表格 -->
    <el-card shadow="always" class="ml10 mb10 mt10 ml10">
      <el-row :gutter="12">
        <el-table
          :data="tableData.list"
          border
          style="width: 100%; height: 645px"
          line-height="50px"
        >
          <el-table-column type="index" label="序号" width="180">
          </el-table-column>
          <el-table-column prop="skuName" label="品类名称"> </el-table-column>
          <el-table-column prop="skuType" label="品类类型">
            <template v-slot="{ row }">
              <div v-if="row.skuType == 1">烧烤类</div>
              <div v-if="row.skuType == 2">酒水类</div>
              <div v-if="row.skuType == 3">冷厨类</div>
              <div v-if="row.skuType == 4">热厨类</div>
              <div v-if="row.skuType == 5">餐具</div>
            </template>
          </el-table-column>
          <el-table-column prop="price" label="品类价钱"> </el-table-column>
          <el-table-column prop="quantity" label="品类库存"> </el-table-column>
          <el-table-column label="创建时间">
            <template #default="scoped">
              <span>{{ parseTime(scoped.row.create_time) }}</span>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" min-width="120">
            <template #default="scoped">
              <el-button
                type="primary"
                size="small"
                @click="handleEdit(scoped.row)"
              >
                修改
              </el-button>
              <el-button
                type="danger"
                size="small"
                @click="deleteClick(scoped.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="18"> </el-col>
        <el-col :span="6">
          <el-pagination
            :page-size="searchData.pageSize"
            :size="searchData.pageNum"
            :background="false"
            layout="total, prev, pager, next"
            :total="tableData.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-col>
      </el-row>
    </el-card>
    <!-- 弹框 -->
    <el-dialog :title="dialogTitle" v-model="dialogFormVisible">
      <el-form :model="formData" :rules="rules" ref="ruleFormRef">
        <el-form-item
          label="品类名称"
          :label-width="formLabelWidth"
          prop="skuName"
        >
          <el-input
            v-model="formData.skuName"
            autocomplete="off"
            placeholder="品类名称"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="品类类型"
          :label-width="formLabelWidth"
          prop="skuName"
        >
          <el-select v-model="formData.skuType" placeholder="请选择">
            <el-option label="烧烤类" value="1" />
            <el-option label="酒水类" value="2" />
            <el-option label="冷厨类" value="3" />
            <el-option label="热厨类" value="4" />
            <el-option label="餐具" value="5" />
          </el-select>
        </el-form-item>
        <el-form-item
          label="品类价钱"
          :label-width="formLabelWidth"
          prop="price"
        >
          <el-input v-model="formData.price" placeholder="品类价钱"></el-input>
        </el-form-item>
        <el-form-item
          label="品类库存"
          type="number"
          :label-width="formLabelWidth"
          prop="quantity"
        >
          <el-input
            v-model="formData.quantity"
            placeholder="品类库存"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel(ruleFormRef)">取 消</el-button>
        <el-button type="primary" @click="onSubmit(ruleFormRef)"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script setup name="SkuName">
import { ref, reactive, onMounted, nextTick } from 'vue'
import {
  listtable,
  gettable,
  addtable,
  updatetable,
  deltable,
} from '@/api/sku/sku.js'
import { ElMessageBox, ElMessage } from 'element-plus'
onMounted(() => {
  geTableList()
})

const formData = reactive({
  skuName: null,
  price: '',
  create_time: '',
  id: '',
  quantity: '',
  skuType: '',
})
const ruleFormRef = ref()
const searchData = reactive({
  skuName: null,
  price: '',
  create_time: undefined,
  skuType: '',
  pageNum: 1,
  pageSize: 10,
})
const rules = ref({
  skuName: [{ required: true, message: '品类名称不能为空', trigger: 'blur' }],
  price: [{ required: true, message: '品类价钱不能为空', trigger: 'blur' }],
  quantity: [{ required: true, message: '品类库存不能为空', trigger: 'blur' }],
  skuType: [{ required: true, message: '品类类型不能为空', trigger: 'change' }],
})
const dialogFormVisible = ref(false)
const formLabelWidth = '120px'
const tableData = reactive({
  list: [],
  total: 0,
})
const dialogTitle = ref('新增品类')
const parseTime = (dates) => {
  const date = new Date(dates)
  const formattedTime = `${date.getFullYear()}-${(date.getMonth() + 1)
    .toString()
    .padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`
  return formattedTime
}
const loading = ref(false)
//获取列表
const geTableList = async () => {
  loading.value = true

  let params = {
    skuName: searchData.skuName,
    price: searchData.price,
    quantity: searchData.quantity,
    skuType: searchData.skuType,
    create_time:
      searchData.create_time == undefined
        ? ''
        : parseTime(searchData.create_time),

    pageNum: searchData.pageNum,
    pageSize: searchData.pageSize,
  }
  let res = await listtable(params)
  loading.value = false
  console.log(res, 623784627893)
  tableData.list = res.data.list
  tableData.total = res.data.total
}
//点击搜索
const search = () => {
  geTableList()
}
//点击新增
const handleAdd = () => {
  dialogTitle.value = '新增品类'
  dialogFormVisible.value = true
}
//点击提交
const onSubmit = async (ruleFormRef) => {
  ruleFormRef.validate(async (valid, fields) => {
    if (valid) {
      dialogFormVisible.value = false
      let params = {
        skuName: formData.skuName,
        price: formData.price,
        quantity: formData.quantity,
        skuType: formData.skuType,
      }
      if (dialogTitle.value == '修改品类') {
        let query = {
          skuName: formData.skuName,
          price: formData.price,
          id: formData.id,
          quantity: formData.quantity,
          skuType: formData.skuType,
        }
        await updatetable(query)
        ElMessage.success('修改完成!')
        geTableList()
        formData.skuName = ''
        formData.price = ''
        formData.quantity = ''
        formData.id = ''
        formData.skuType = ''
      } else {
        await addtable(params)
        ElMessage.success('新增完成!')
        geTableList()
        formData.skuName = ''
        formData.price = ''
        formData.quantity = ''
        formData.skuType = ''
      }
    } else {
      console.log('error submit!', fields)
    }
  })
}
//点击删除
const deleteClick = (row) => {
  ElMessageBox.confirm('你确定要删除吗?', '提示!', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(async () => {
    await deltable(row.id)
    geTableList()
    ElMessage({
      type: 'success',
      message: '删除成功 !',
    })
  })
}
const handleEdit = async (row) => {
  console.log(row)

  // 编辑代码...
  let res = await gettable(row.id)
  console.log(res.data, 999)
  formData.skuName = res.data.skuName
  formData.price = res.data.price
  formData.id = res.data.id
  formData.skuType = res.data.skuType
  formData.quantity = res.data.quantity
  dialogTitle.value = '修改品类'
  dialogFormVisible.value = true
}
const cancel = (formData) => {
  formData.resetFields()
  dialogFormVisible.value = false
}

//点击每页数量
const handleSizeChange = async (size) => {
  searchData.pageSize = size
  geTableList()
}
//点击页码
const handleCurrentChange = async (currentPage) => {
  searchData.pageNum = currentPage
  geTableList()
}
//点击重置
const reset = () => {
  searchData.skuName = ''
  searchData.price = ''
  searchData.create_time = undefined
  searchData.skuType = ''
  geTableList()
}
</script>

<style lang="less" scoped></style>
